<script>
    export default {
        name: 'Search',
        data() {
            return {
                hots: [],
                isShow: true, // 控制是否显示热门搜索
                inpval: '', // 输入的内容
                list: [], // 搜索的动态名称
                info: ''
            }
        },
        created() {
            this.hotSearch()
        },
        methods: {
            // 获取热搜的信息
            async hotSearch() {
                let res = await this.$api.hotSearch();
                console.log('热搜词', res.data);
                this.hots = res.data.result.hots;
            },
            // 搜索数据接口
            async getSearch(keywords) {
                let res = await this.$api.search({
                    keywords,
                    type: 'mobile'
                });
                console.log('搜索数据', res.data);
                // 判断一下是否能查询到数据
                if (res.data.result.allMatch) {
                    this.list = res.data.result.allMatch;
                    this.info = '';
                } else {
                    this.list = [];
                    this.info = '查无数据';
                }

            }
        },
        // 监听器
        watch: {
            inpval(val) {
                // console.log('输入的值是否变化', val);
                // 隐藏热门搜索的词语
                if (val) {
                    this.isShow = false;
                    // 搜索数据查询
                    this.getSearch(val);
                } else {
                    this.isShow = true;
                }
            }
        },
        // 定义指令--获取焦点
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        }
    }
</script>

<template>
    <div>
        <!--1、搜索-->
        <div class="search">
            <input v-focus type="text" placeholder="搜索歌曲、歌手" class="inp" name="" id="" v-model="inpval">
        </div>
        <!--2、热门搜索-->
        <div class="hot-search" v-if="isShow">
            <div class="title">热门搜素</div>
            <div class="wrapper">
                <div class="item" v-for="(item, index) in hots" :key="index">{{ item.first }}</div>
            </div>
        </div>
        <!--3、搜索的数据列表展示-->
        <div class="search-list" v-else>
            <div class="name">搜索"{{ inpval }}"</div>
            <div class="info" v-for="item in list" :key="item.keyword">{{ item.keyword }}</div>
            <div>{{ info }}</div>
        </div>
    </div>
</template>

<style scoped lang="less">
    .search {
        padding: 0.3rem;
        border-bottom: 1px solid #eeeeee;
        .inp {
            border: 0;
            outline: none;
            width: 100%;
            box-sizing: border-box;
            background-color: #eeeeee;
            height: 0.6rem;
            line-height: 0.6rem;
            border-radius: 0.2rem;
            padding-left: 0.2rem;
        }
    }
    .hot-search {
        padding: 15px 10px 0;
        .title {
            font-size: 12px;
            line-height: 12px;
            color: #666666;
        }
        .wrapper {
            margin: 10px 0 7px;
            .item {
                display: inline-block;
                height: 32px;
                margin-right: 8px;
                margin-bottom: 8px;
                padding: 0 14px;
                font-size: 14px;
                line-height: 32px;
                color: #333333;
                border: 1px solid #d3d4da;
                border-radius: 32px;
            }
        }
    }

    .search-list {
        .name {
            height: 0.9rem;
            line-height: 0.9rem;
            color: rebeccapurple;
            padding-left: 0.2rem;
            border-bottom: 1px solid #eeeeee;
        }

        .info {
            height: 0.9rem;
            line-height: 0.9rem;
            padding-left: 0.2rem;
            border-bottom: 1px solid #eeeeee;
        }
    }
</style>